<template>
    <div class="main">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>交易设置</span>
                </div>
            </template>
            <el-form :model="page" class="demo-form-inline" :rules="rules">
                <el-form-item label="待付款后取消订单时间" prop="cancellationTimePendingPayment">
                    <el-input v-model="page.cancellationTimePendingPayment" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="发货后自动确认收货时间" prop="confirmDeliveryTime">
                    <el-input v-model="page.confirmDeliveryTime" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="收货后不能发起售后时间" prop="afterSalesTimeInitiated">
                    <el-input v-model="page.afterSalesTimeInitiated" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="退款手续费" prop="refundFee">
                    <el-input v-model="page.refundFee" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="订单到期前" prop="remind">
                    <el-input v-model="page.remind" placeholder="请输入">
                        <template #append>%</template>
                    </el-input>
                </el-form-item>
                <!-- <el-form-item label="到期订单自动退款" prop="automaticRefund">
                    <el-radio-group v-model="page.automaticRefund">
                        <el-radio label="开启" value="0" />
                        <el-radio label="关闭" value="1" />
                    </el-radio-group>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>
            </el-form>


        </el-card>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { orderSettingsSelect, orderSettingsPperation } from '@/api/orderCenter.js'
import { ElMessage } from 'element-plus'

const page = ref({
    cancellationTimePendingPayment: "",
    confirmDeliveryTime: "",
    afterSalesTimeInitiated: "",
    refundFee: "",
    remind: "",
    // automaticRefund: "0",
})
const rules = reactive({
    cancellationTimePendingPayment: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    confirmDeliveryTime: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    afterSalesTimeInitiated: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    refundFee: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    remind: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    // automaticRefund: [
    //     { required: true, message: '请输入', trigger: 'change' },
    // ],
})
// 保存
const onSubmit = () => {
    orderSettingsPperation(page.value).then(res => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            getList()
        }
    })
}


// 获取列表
const getList = () => {
    orderSettingsSelect().then(res => {
        if (res.code == 200) {
            page.value = { ...res.data }
        }
    })
}





onMounted(() => {
    getList()
})
</script>

<style lang="scss" scoped>
.box-card ::v-deep .el-select__wrapper {
    width: 100px;
}

.main {
    padding: 0 5px 5px 5px;

    .el-input {
        width: 300px;
    }
}
</style>